<template>
  <div>
    <el-dialog
      title="客户回访记录"
      :visible.sync="dialogFormVisible"
      width="50%"
      style="text-align: left"
    >
      <div>
        <el-table
          :data="visitRecordData"
          stripe
          style="width: 100%"
          :row-style="{ height: '32px' }"
          :header-row-style="{ height: '10px' }"
          :cell-style="{ padding: '1px' }"
        >
          <el-table-column
            prop="created_at"
            label="回访时间"
            :formatter="handleFormatter"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="is_ok"
            label="是否有效"
            width="100"
            :formatter="handleFormatter"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="所有回访记录"
            width="450"
          ></el-table-column>
        </el-table>
      </div>

      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from "@/utils/time.js";

export default {
  name: "CallPhone",
  data() {
    return {
      dialogFormVisible: false,
      customerId: 0,
      total: 0,
      visitRecordData: [], // 以往回访记录
    };
  },
  methods: {
    handleOpen(rowData) {
      // console.log(rowData)
      this.customerId = rowData.id;
      // 获取之前回访记录
      this.handelGetVisitRecord(rowData.id);
      this.dialogFormVisible = true;
    },
    // 格式化
    handleFormatter(row, column) {
      if (column.property === "created_at") {
        return dateFormat(row.created_at);
      }
      if (column.property === "is_ok") {
        return row.is_ok === 0 ? "无效" : "有效";
      }
    },
    handelGetVisitRecord(customerId, curPage) {
      curPage = curPage === "" ? curPage : 1;
      this.AXIOS.get(`/mycrmapi/visit/getVisitRecord/${customerId}/yes`, {
        params: { curPage: curPage },
      })
        .then((resp) => {
          console.log(resp.data);
          let statusCode = resp.data.status;
          if (statusCode === 1) {
            this.visitRecordData = resp.data.data;
            this.total = resp.data.total;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handleCurrentChange(curPage) {
      this.handelGetVisitRecord(this.customerId, curPage);
    },
  },
};
</script>

<style scoped>
</style>
